sling-web-component-input

sling-web-component-input

Install

npm instal sling-web-component-input 

Tag

<sling-input></sling-input>      

Dependencies

• sling-web-framework
• sling-web-helpers

Attributes and properties

Name	Type	Default value	ReflectToAttribute	Observer	callSdk
autocomplete	String		:heavy_check_mark:
checked	Boolean		:heavy_check_mark:
disabled	Boolean		:heavy_check_mark:
label	String		:heavy_check_mark:
type	String	text	:heavy_check_mark:	formatType
max	Number		:heavy_check_mark:
maxlength	Number		:heavy_check_mark:
min	Number		:heavy_check_mark:
minlength	Number		:heavy_check_mark:
name	String		:heavy_check_mark:
pattern	String		:heavy_check_mark:
placeholder	String		:heavy_check_mark:
readonly	Boolean		:heavy_check_mark:
required	Boolean		:heavy_check_mark:
size	Number		:heavy_check_mark:
src	String		:heavy_check_mark:
state	String		:heavy_check_mark:
step	Number		:heavy_check_mark:
validationmessage	Object		:heavy_check_mark:
value	String		:heavy_check_mark:	formatValue

Description

Name	Description
autocomplete	Indicates whether the control value can be automatically completed by the browser, is ignored if value of type attribute is hidden, password, checkbox, radio, file or button type (button, submit, reset, image). More information on input HTML.
checked	When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default; otherwise, this attribute is ignored. More information on input HTML.
disabled	Indicates that form control is not available for interaction. More information on input HTML.
label	Receives the text that will be used as input label.
type	The type of control to be displayed. The property receives all the options of a input HTML.
max	The maximum value (numeric or date) for this item, which should not be less than its minimum value (min attribute).More information on input HTML.
maxlength	If the value of the ** type ** attribute is text, email, search, password, tel or url, this attribute specifies the maximum number of characters (in Unicode code points) that the user can insert. More information on input HTML.
min	The minimum value (number or date) for this item, which should not be greater than its maximum (max attribute). More information on input HTML.
minlength	If the value of the ** type ** attribute is text, email, search, password, tel or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. More information on input HTML.
name	The name of the control, which is sent along with the form data.
oninput	A function that is called when populated the field, it triggers an input event that loads an object with field information.
pattern	A regular expression used to validate the value of the control. More information on input HTML.
placeholder	A hint to the user of what he can enter in the control. More information on input HTML.
readonly	This Boolean attribute indicates that the user can not modify the value of the control. More information on input HTML.
required	This attribute specifies that the user must fill in the field with a value before submitting the form. More information on input HTML.
size	The initial size of the control. More information on input HTML.
src	If the value of the type attribute is image, this attribute specifies a URI for the location of an image to be displayed on the graphic button. More information on input HTML.
state	Controls the state of input field, its values ​​may vary in success warning and error
step	Works together with min and max attributes to limit increments in which numeric values ​​or dates can be changed. More information on input HTML.
validationmessage	Receives an object with the validation message from the parent.
value	The initial value of control. This attribute is optional except when the value of the type attribute is radio or checkbox. More information on input HTML.

Events

• input

Description: Event triggered when field is populated, has the values and field type as properties.

Details:

Name	Description
value	Value of input field that will be passed to the parent.
type	Type of input field that will be passed to the parent.

Examples

All component examples can be emulated using the npm start sling-web-component-input command.

Use

<sling-input label="Label" placeholder="Placeholder..."></sling-input>      

<sling-input label="Disabled" placeholder="Placeholder..." disabled></sling-input>      

<sling-input label="Success" placeholder="Placeholder..." state="success"></sling-input>